﻿@page "/"
@page "/introduction"

<h3>简介</h3>

<p>BootstrapBlazor 是一套 Bootstrap 风格的 Blazor UI 组件库，可以认为是 Bootstrap 项目的 Blazor 版实现。</p>

<p>由于 Bootstrap UI 框架对 jQuery 的依赖，所以我们的 BootstrapBlazor 对 jQuery 也是依赖的</p>

<p>依赖关系为：BootstrapBlazor > Bootstrap > jQuery</p>

<h3>作品展示</h3>

<p>国内最大开源平台码云 C# 板块最高星 GVP 作品 <b><a href="https://gitee.com/LongbowEnterprise/BootstrapAdmin" target="_blank">通用后台管理系统 BootstrapAdmin</a></b> 使用本组件实现全部功能</p>

<p>演示网站：<a href="https://ba.sdgxgz.com/Pages" target="_blank">https://ba.sdgxgz.com</a></p>

<h3>快速上手</h3>

<p><a href="https://v4.bootcss.com/docs/getting-started/introduction/" target="_blank">Bootstrap 快速入门</a></p>

<h4>CSS 文件</h4>

<p>将 Bootstrap 的 CSS 文件以 <code class="highlight">&lt;link&gt;</code> 标签的形式添加到 <code class="highlight">&lt;head&gt;</code> 标签中，并放置在所有其它样式表之前就行了。</p>
<Pre>&lt;link rel="stylesheet" href="~/lib/twitter-bootstrap/css/bootstrap.css" /&gt;
&lt;link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome.css" /&gt;
&lt;link rel="stylesheet" href="~/_content/BootstrapBlazor/css/bootstrap.blazor.css" /&gt;
</Pre>
<h4>JS 文件</h4>

<p>Bootstrap 所提供的许多组件都依赖 JavaScript 才能运行。具体来说，这些组件都依赖 jQuery、Popper.js 以及我们自己的 JavaScript 插件。将以下 <code class="highlight">&lt;script&gt;</code> 标签放到页面尾部且在 <code class="highlight">&lt;/body&gt;</code> 标签之前即可起作用。他们之间的顺序是： jQuery 必须排在第一位，然后是我们的 JavaScript 插件。</p>
<Pre>&lt;script src="~/lib/jquery/jquery.js"&gt;&lt;/script&gt;
&lt;script src="~/lib/twitter-bootstrap/js/bootstrap.bundle.js"&gt;&lt;/script&gt;
&lt;script src="~/_content/BootstrapBlazor/css/bootstrap.blazor.js"&gt;&lt;/script&gt;</Pre>

<h4>组件引用</h4>

<p>组件引用有多种方法，可以参阅 <a href="install">安装</a></p>

<div class="code-label">.NET CLI</div>
<Pre class="no-highlight">dotnet add package BootstrapBlazor</Pre>

<h4>注册服务</h4>

<p>组件中的 <code>Toast</code> 与 <code>PopoverConfirm</code> 使用了注入服务，方便随时随地调用 <code>Show</code> 方法进行弹出对话框进行提示操作，所以在项目的 <code>Startup</code> 文件中的 <code>ConfigureServices</code> 方法中加入如下代码</p>
<Pre>public void ConfigureServices(IServiceCollection services)
{
    services.AddRazorPages();
    services.AddServerSideBlazor();
    services.AddBootstrapBlazor(); // 添加本行代码
}</Pre>

<h4>添加命名空间到 <code>_Imports.razor</code> 文件</h4>

<Pre class="no-highlight">@@using BootstrapBlazor.Components</Pre>

<h4>组件特色</h4>

<p>Bootstrap Blazor UI 组件库提供了从基本的 <code>Button</code> 组件到高级的网页级 <code>SmartPage</code> 组件</p>

<p>优势</p>

<ul>
    <li>使用组件无需编写 <code>Javascript</code></li>
    <li>组件支持所有 <code>html</code> 特性</li>
    <li>组件支持数据双向绑定</li>
    <li>组件支持自动客户端验证</li>
    <li>组件支持组合</li>
</ul>
